<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" color="white" rightIcon="home" title="添加项目" @click-left="back" backgroundColor="#393c43" @click-right="back" />
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<i>*</i>
				<text>项目名称</text>
				<input name="project_name" placeholder="请输入项目名称" />
			</view>
			<view class="uni-form-item">
				<i>*</i>
				<text>装修风格</text>
				<picker @change="bindPickerChange" :value="index" :range="array"><input name="decor_style" placeholder="请输入装修风格" :value="array[index]" /></picker>
			</view>
			<view class="uni-form-item">
				<i>*</i>
				<text>项目地址</text>
				<input name="project_address" placeholder="请输入项目地址" />
			</view>
			<view class="uni-form-item box-container">
				<i>*</i>
				<text>户型</text>
				<view class="box-flex">
					<view class="uni-flex">
						<uni-number-box :min="0" :max="9" @change="roomNumChange"></uni-number-box>
						<text>室</text>
					</view>
					<view class="uni-flex">
						<uni-number-box :min="0" :max="9" @change="hallNumChange"></uni-number-box>
						<text>厅</text>
					</view>
					<view class="uni-flex">
						<uni-number-box :min="0" :max="9" @change="toiletNumChange"></uni-number-box>
						<text>卫</text>
					</view>
				</view>
			</view>
			<button class="save" form-type="submit" type="warn">保存</button>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			array: ['现代简约', '田园风格', '中式风格', '地中海风格', '日式风格', '古典风格', '复古中式风格', '新古典风格', '简欧风格', '现代轻奢', '新中式', '美式'],
			index: 0,
			roomNum: 0,
			hallNum: 0,
			toiletNum: 0
		};
	},
	onLoad: function() {
		uni.getStorage({
			key: 'cellphone',
			success: function(res) {},
			fail: function(res) {
				uni.navigateTo({
					url: '../login/index'
				});
			}
		});
	},
	methods: {
		formSubmit: function(e) {
			var formdata = e.detail.value;
			var cellphone;
			formdata.houseType = this.roomNum+'室'+this.hallNum+'厅'+this.toiletNum+'卫';
			uni.getStorage({
				key: 'cellphone',
				success: function(res) {
					cellphone = res.data;
					formdata.cellphone = cellphone;
					
				},
				fail: function(res) {
					uni.navigateTo({
						url: '../login/index'
					});
				}
			});

			uni.request({
				url: this.websiteUrl + '/api/add_project',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: formdata,
				success: res => {
					if (res.data.code == 100) {
						uni.navigateTo({
							url: '../upload/upload?id='+res.data.data
						});
					}
				}
			});
		},
		roomNumChange: function(value) {
			this.roomNum = value;
		},
		hallNumChange: function(value) {
			this.hallNum = value;
		},
		toiletNumChange: function(value) {
			this.toiletNum = value;
		},
		back() {
			uni.switchTab({
				url: '../user/index'
			});
		},
		bindPickerChange: function(e) {
			
			this.index = e.target.value;
		}
	}
};
</script>

<style>
.uni-flex {
	display: flex;
}
.uni-form-item {
	display: flex;
	align-items: center;
	height: 72rpx;
	line-height: 72rpx;
	width: 90%;
	margin: 30rpx auto 0;
}

.uni-form-item i {
	color: red;
}
.uni-form-item text {
	color: white;
	width: 150rpx;
}
.uni-form-item picker {
	width: 100%;
	margin-right: 30rpx;
}
.uni-form-item input {
	background-color: white;
	width: 100%;
	margin-left: 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 20rpx;
}
.box-container {
	height: 150rpx;
}
.box-flex {
	margin-left: 50rpx;
	display: flex;
	flex-wrap: wrap;
}
.box-flex text {
	width: 30rpx;
}

.save {
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 30rpx;
	width: 80%;
	margin: 30rpx auto;
}
</style>
